<template>
  <div id="minderEditor">
    <VueTestcaseMinderEditor
      :initJson="data"
      ref="minderEditor"
      :allowEditPriority="editMode"
      :allowEditLabel="editMode"
      :allowEditResult="editMode"
      :allowEditNode="editMode">
    </VueTestcaseMinderEditor>
    <div class="bottom_btn">
      <div class="btn_item fab-item-title fifthBtn"><span @click="toggleEditMode">{{ buttonText }}</span></div>
      <div class="btn_item fab-item-title fourthBtn"><span @click="logCurrentData" v-permission="'caseGenerate:exportCaseExcel'">导出EXECL</span></div>
      <div class="btn_item fab-item-title secondBtn"><span @click="back">关 闭</span></div>
    </div>
  </div>

</template>

<script>
export default {
  name: 'index',
  props: {
    data: {
      type: Object,
      default: {}
    },
    moduleName: {
      type: String,
      default: ""
    },
    id: {
      type: String,
      default: ""
    },
    version: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      editMode: true
    }
  },
  computed: {
    buttonText: function () {
      return this.editMode === false ? '进入编辑模式，允许修改脑图内容及登记结果' : '退出编辑模式'
    }
  },
  methods: {
    back() {
      this.$emit("close", false)
    },
    /*导出Excel*/
    exportExcel(data) {
      const loading = this.$loading({
        lock: true, // lock的修改符--默认是false
        text: 'Loading', // 显示在加载图标下方的加载文案
        spinner: 'el-icon-loading', // 自定义加载图标类名
        target: document.querySelector('.main')//loading覆盖的dom元素节点
      })
      data["moduleName"] = this.moduleName
      data["id"] = this.id
      data["version"] = this.version
      this.api({
        url: "/exportCaseExcel",
        method: "post",
        data: data,
        responseType: 'blob'  // 表明返回服务器返回的数据类型，要加在请求头里面，否则识别不了文件流
      }).then(resp => {
        console.log(resp)
        const link = document.createElement('a');
        let blob = new Blob([resp.data], {type: 'application/vnd.ms-excel'});
        link.style.display = 'none';
        link.href = URL.createObjectURL(blob);
        link.setAttribute('download', decodeURI(resp.headers["filename"]));
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        this.$message({message: "导出成功", type: 'success'})
        loading.close();
      });
    },
    logCurrentData: function (event) {
      const caseJson = this.$refs.minderEditor.getJsonData();
      console.log('编辑器中的最新用例内容：', caseJson)
      this.exportExcel(caseJson)
      const nodeDatas = {}
      this.checkJsonHasDuplicateId(caseJson.root, nodeDatas)
      let hasDuplicateId = false;
      Object.keys(nodeDatas).forEach(function (key) {
        const nodeData = nodeDatas[key]
        if (nodeData.length > 1) {
          console.log('重复id内容: ', nodeData)
          hasDuplicateId = true;
        }
      })
      if (hasDuplicateId) {
        console.log('存在重复 id ，详情请看日志')
      } else {
        console.log('未发现重复 id ')
      }
    },
    toggleEditMode: function (event) {
      this.editMode = !this.editMode
    },
    checkJsonHasDuplicateId: function (jsonData, nodeDatas) {
      let id;
      if (jsonData && jsonData.data && jsonData.data.id) {
        id = jsonData.data.id;
      }
      if (id !== undefined) {
        if (!Object.keys(nodeDatas).includes(id)) {
          nodeDatas[id] = [jsonData.data]
        } else {
          nodeDatas[id].push(jsonData.data)
        }
      }
      if (jsonData.children && jsonData.children.length > 0) {
        jsonData.children.forEach(element => {
          this.checkJsonHasDuplicateId(element, nodeDatas);
        });
      }
    }
  }
}
</script>

<style scoped>
.vue-testcase-minder-editor-container {
  height: calc(100vh - 160px) !important;
}

.bottom_btn {
  z-index: 999;
  position: fixed;
  bottom: 35px;
  right: 60px;
}

.secondBtn {
  color: rgb(0, 128, 128);
  background: rgb(235, 242, 242);
}

.fourthBtn {
  color: rgb(103, 194, 58);
  background: rgb(242, 249, 238);
}

.fifthBtn {
  color: rgb(230, 162, 60);
  background: rgb(252, 246, 238);
}

.fab-item-title {
  cursor: pointer;
  box-shadow: 0 1px 0.5px #ccc;
  padding: 5px 5px;
  font-size: 14px;
  min-width: 5em;
  white-space: nowrap;
  border-radius: 2px;
  text-align: center;
  display: inline-block;
}
</style>
